<template>
  <div class="b-config-resource">
    <div class="b-config-resource__header flex items-center justify-between">
      <span class="app-resource-header--name">{{title}}</span>

      <div class="b-config-resource-action flex">
        <BDotButton :name="rTitle"
                    @click="handleOpenResource" />
        <BDotButton name="Url"
                    v-if="isUrl"
                    @click="handleOpenUrl" />
      </div>
    </div>
    <ZDragTable v-if="cuurentValue.length"
                v-model="cuurentValue">
      <el-table-column prop="resourceName"
                       label="Name">
      </el-table-column>
      <el-table-column label="Action"
                       width="150">
        <template v-slot:default="{$index}">

          <ZIcon icon="cuifont icon_delete"
                 class=" cursor_pointer"
                 @click.native="handleDelete($index)" />

        </template>
      </el-table-column>
    </ZDragTable>

    <div class="b-config-resource--no flex items-center justify-center"
         v-else>
      {{$t('paywall.noContentYet')}}！
    </div>

    <ZDialog v-model="urlVisible"
             :minHeight="0"
             title="Add Url"
             @save="handleSaveUrl">
      <UrlForm v-model="url"
               :list="cuurentValue" />
    </ZDialog>
    <ZDialog v-model="resourceVisible"
             :minHeight="0"
             :title="`Select ${rTitle}`"
             @save="handleSaveResource">
      <BResource :component="component"
                 v-model="resources" />
    </ZDialog>
  </div>
</template>

<script>
import BDotButton from './b-dot-button.vue'
import UrlForm from './url-form.vue'
import ZDragTable from '@/components/storybook/z-drag-table'
import ZDialog from '@/components/storybook/z-dialog/index'
import BResource from '@/components/storybook/b-resource/index'
import { uniqBy } from 'lodash'
import ZIcon from '@/components/storybook/z-icon'
import { getSnapshots, getResourceType } from '@/components/storybook/utilties/chargebee'

export default {
  name: 'BConfigResource',
  components: {
    ZIcon,
    BDotButton,
    ZDragTable,
    ZDialog,
    UrlForm,
    BResource
  },
  props: {
    value: {
      type: Array,
      default: () => ([])
    },
    isUrl: Boolean,
    title: String,
    rTitle: String,
    component: String,
    resourceMenu: [String, Number],
    resourceType: [String, Number]
  },
  data () {
    return {
      urlVisible: false,
      resourceVisible: false,
      captureLoading: false,

      url: {},
      resources: []
    }
  },
  computed: {
    cuurentValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val.map((i, m) => ({ ...i, sort: m })))
      }
    }
  },
  watch: {
    value: {
      handler (val) {
        this.resources = val.filter(i => i.resourceId !== '0').map(({ resourceId }) => ({
          id: resourceId
        }))
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleOpenResource () {
      this.resourceVisible = true
    },
    handleOpenUrl () {
      this.urlVisible = true
    },
    handleSaveResource (event, done) {
      const resources = this.resources.map(({ id, name }) => ({
        resourceId: id,
        resourceName: name,
        resourceType: this.resourceType,
        resourceMenu: this.resourceMenu
      }))
      this.cuurentValue = uniqBy([...this.cuurentValue, ...resources], 'resourceId')
      done()
    },
    handleSaveUrl (event, done) {
      const resource = {
        resourceId: '0',
        resourceType: 3,
        resourceMenu: this.resourceMenu,
        ...this.url
      }
      this.cuurentValue = [...this.cuurentValue, resource]
      done()
    },
    handleDelete (index) {
      this.cuurentValue = this.cuurentValue.filter((m, i) => i !== index)
    },
    async handleCapture (row) {
      try {
        this.captureLoading = true
        const { printscreen } = this.$interface.snapshots
        const params = {
          fileType: 0,
          resourceType: getResourceType(row.resourceType),
          url: getSnapshots(row),
          resourceId: row.resourceId
        }

        await printscreen(params)
      } catch (error) {

      } finally {
        this.captureLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.b-config-resource {
  &__header {
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #f0f0f0;
  }
  &--no {
    height: 50px;
    color: grey;
    font-size: 12px;
  }
}
</style>
